<script lang="ts" setup>
import { onMounted, onUnmounted, ref, getCurrentInstance } from "vue"
import useDraw from "@/utils/useDraw"
const { proxy }: any = getCurrentInstance()
// * 适配处理
const { calcRate, windowDraw, unWindowDraw } = useDraw()
const eacharts1 = ref(null)
const data: number[] = []
for (let i = 0; i < 5; ++i) {
  data.push(Math.round(Math.random() * 200))
}
const myChart = ref<any>()
const renderChart = () => {
  if (myChart.value == null) {
    const myDom = eacharts1.value
    myChart.value = proxy.$echarts.init(myDom)
  }

  myChart.value.setOption({
    title: [
      {
        text: "凯茂科技动态"
      }
    ],
    color: ["#4CD964", "#5AC8FA", "#007AFF", "#5856D6", "#FF2D70", "#FF3B30", "#FF9500", "#FFCC00", "#8E8E93"],
    xAxis: {
      max: "dataMax"
    },
    yAxis: {
      type: "category",
      data: ["A", "B", "C", "D", "E"],
      inverse: true,
      animationDuration: 300,
      animationDurationUpdate: 300,
      max: 2 // only the largest 3 bars will be displayed
    },
    series: [
      {
        realtimeSort: true,
        name: "柱状图",
        type: "bar",
        data: data,
        colorBy: "data",
        barWidth: 30,
        label: {
          show: true,
          position: "right",
          valueAnimation: true
        }
      }
    ],
    legend: {
      show: false
    },
    animationDuration: 0,
    animationDurationUpdate: 3000,
    animationEasing: "linear",
    animationEasingUpdate: "linear"
  })
}
function run() {
  for (let i = 0; i < data.length; ++i) {
    if (Math.random() > 0.9) {
      data[i] += Math.round(Math.random() * 2000)
    } else {
      data[i] += Math.round(Math.random() * 200)
    }
  }
  renderChart()
}

setTimeout(function () {
  run()
}, 0)
setInterval(function () {
  run()
}, 1500)

// 生命周期
onMounted(() => {
  windowDraw()
  calcRate()
  // console.log(eacharts1.value)
  renderChart()
})

onUnmounted(() => {
  unWindowDraw()
})
</script>
<template>
  <div class="eacharts1" ref="eacharts1" style="width: 500px; height: 500px" />
</template>
